{% set uniqid = uniqid ?? uniqid('machine_') %}
{% set idBase = "vagrantfile-vm-provider-local-machines-#{uniqid}" %}
{% set nameBase = "vagrantfile[vm][provider][local][machines][#{uniqid}]" %}

{% set forwarded_ports = (machine.network.forwarded_port is defined)
    ? machine.network.forwarded_port : [] %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-id">
            Internal Identifier
        </label>
        <input type="text" id="{{ idBase }}-id"
               name="{{ nameBase }}[id]"
               placeholder="machine1" class="form-control"
               value="{{ machine.id }}" />
        <div class="help-block">
            This is the ID used within the <code>Vagrantfile</code>.
            It is only used for your internal identification.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-hostname">
            Hostname
        </label>
        <input type="text" id="{{ idBase }}-hostname"
               name="{{ nameBase }}[hostname]"
               placeholder="machine1.puphpet" class="form-control"
               value="{{ machine.hostname }}" />
        <div class="help-block">
            The hostname the machine should have.
            <a href="http://stackoverflow.com/a/3523068/446766"
               target="_blank">This answer lists all valid characters.</a>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-network-private_network">
            IP Address
        </label>
        <input type="text" id="{{ idBase }}-network-private_network"
               name="{{ nameBase }}[network][private_network]"
               placeholder="192.168.56.101" class="form-control"
               value="{{ machine.network.private_network }}"
               data-target="update-local-ip-address" />
        <div class="help-block">
            IP address to use for accessing the VM. This is the
            <span class="label label-info" data-toggle="help-text">
                <i class="fa fa-ellipsis-h"></i></span>
            <div class="hidden">
                IP address you will need to enter into your
                <code>hosts</code> file for every virtual hosts
                you create later on.
            </div>
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-memory">
            Memory
        </label>
        <input type="number" id="{{ idBase }}-memory"
               name="{{ nameBase }}[memory]"
               placeholder="512" min="64" class="form-control"
               value="{{ machine.memory }}" />
        <div class="help-block">
            Memory to assign to VM in megabytes (only integers)
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-cpus">
            CPUs
        </label>
        <input type="number" id="{{ idBase }}-cpus"
               name="{{ nameBase }}[cpus]"
               placeholder="1" min="1" class="form-control"
               value="{{ machine.cpus }}" />
        <div class="help-block">
            Number of CPUs to assign to VM (only integers)
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-info">
        <div class="panel-heading">Forwarded Ports</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_local.machine_forwarded_port', {'mId': uniqid}) }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, forwarded_port in forwarded_ports %}
                    {% set blockId = "#{idBase}-network-forwarded_port-#{index}" %}
                    {% set blockName = "#{nameBase}[network][forwarded_port][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a machine forwarded port pair
                </div>
                {% for index, forwarded_port in forwarded_ports %}
                    {% include 'PuphpetBundle:vagrantfile-local:machine-forwarded-port.html.twig' with {
                        'forwarded_port': forwarded_port,
                        'mId': uniqid,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
